<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放网站</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }

        nav {
            margin-bottom: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            transition: all 0.3s ease;
        }

        nav:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        nav a {
            margin: 0 10px;
            text-decoration: none;
            color: #333;
            padding: 5px 10px;
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        nav a:hover {
            background-color: #e0e0e0;
        }

        nav a.active {
            font-weight: bold;
            color: #007BFF;
            background-color: rgba(0, 123, 255, 0.1);
        }

        .category-section {
            margin-bottom: 40px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .category-section:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .category-section h2 {
            margin-bottom: 10px;
            color: #333;
        }

        .video-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .video-card {
            width: calc(33.33% - 20px);
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .video-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .video-card video {
            width: 100%;
            height: auto;
        }

        .video-card h3 {
            margin: 10px;
            font-size: 16px;
            color: #333;
        }

        #uploadButton {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #uploadModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        #uploadForm {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        #uploadForm input,
        #uploadForm select {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }

        #uploadForm button {
            padding: 10px 20px;
            margin-right: 10px;
        }

        #searchInput {
            margin-bottom: 20px;
            padding: 10px;
            width: 300px;
        }
    </style>
</head>

<body>
    <h1>视频播放网站</h1>
    <input type="text" id="searchInput" placeholder="按视频名称搜索">
    <button id="uploadButton">上传视频</button>
    <nav>
        <a href="#" data-category="all" class="active">全部</a>
        <a href="#" data-category="science-fiction">科幻</a>
        <a href="#" data-category="romance">爱情</a>
        <a href="#" data-category="action">动作</a>
        <a href="#" data-category="animation">动漫</a>
    </nav>
    <div id="videoList"></div>

    <div id="uploadModal">
        <form id="uploadForm">
            <input type="text" id="videoName" placeholder="视频名称">
            <select id="videoCategory">
                <option value="science-fiction">科幻</option>
                <option value="romance">爱情</option>
                <option value="action">动作</option>
                <option value="animation">动漫</option>
            </select>
            <input type="file" id="videoFile" accept="video/mp4,video/webm,video/ogg">
            <button type="button" id="uploadSubmit">确认</button>
            <button type="button" id="uploadCancel">取消</button>
        </form>
    </div>

    <script>
        const videoList = document.getElementById('videoList');
        const categoryLinks = document.querySelectorAll('nav a');
        const uploadButton = document.getElementById('uploadButton');
        const uploadModal = document.getElementById('uploadModal');
        const uploadForm = document.getElementById('uploadForm');
        const uploadSubmit = document.getElementById('uploadSubmit');
        const uploadCancel = document.getElementById('uploadCancel');
        const searchInput = document.getElementById('searchInput');

        const categoryMap = {
            all: '全部',
           'science-fiction': '科幻',
            romance: '爱情',
            action: '动作',
            animation: '动漫'
        };

        async function fetchVideos(category, searchQuery = '') {
            try {
                let apiUrl = `http://localhost:3000/videos?category=${category}`;
                if (searchQuery) {
                    apiUrl += `&search=${searchQuery}`;
                }
                const response = await fetch(apiUrl);
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                const data = await response.json();
                videoList.innerHTML = '';

                if (category === 'all') {
                    const categories = Object.keys(categoryMap).filter(cat => cat!== 'all');
                    for (const cat of categories) {
                        const catVideos = data.filter(video => video.category === cat);
                        if (catVideos.length > 0) {
                            const categorySection = document.createElement('div');
                            categorySection.classList.add('category-section');

                            const categoryTitle = document.createElement('h2');
                            categoryTitle.textContent = categoryMap[cat];
                            categorySection.appendChild(categoryTitle);

                            const videoListDiv = document.createElement('div');
                            videoListDiv.classList.add('video-list');

                            catVideos.forEach(video => {
                                const videoCard = document.createElement('div');
                                videoCard.classList.add('video-card');

                                const videoElement = document.createElement('video');
                                videoElement.controls = true;

                                const mp4Source = document.createElement('source');
                                mp4Source.src = `/videos/${video.filename.replace(/\.\w+$/, '.mp4')}`;
                                mp4Source.type = 'video/mp4';
                                videoElement.appendChild(mp4Source);

                                const webmSource = document.createElement('source');
                                webmSource.src = `/videos/${video.filename.replace(/\.\w+$/, '.webm')}`;
                                webmSource.type = 'video/webm';
                                videoElement.appendChild(webmSource);

                                const oggSource = document.createElement('source');
                                oggSource.src = `/videos/${video.filename.replace(/\.\w+$/, '.ogg')}`;
                                oggSource.type = 'video/ogg';
                                videoElement.appendChild(oggSource);

                                const titleElement = document.createElement('h3');
                                titleElement.textContent = video.filename;

                                videoCard.appendChild(videoElement);
                                videoCard.appendChild(titleElement);
                                videoListDiv.appendChild(videoCard);
                            });

                            categorySection.appendChild(videoListDiv);
                            videoList.appendChild(categorySection);
                        }
                    }
                } else {
                    const categorySection = document.createElement('div');
                    categorySection.classList.add('category-section');

                    const categoryTitle = document.createElement('h2');
                    categoryTitle.textContent = categoryMap[category];
                    categorySection.appendChild(categoryTitle);

                    const videoListDiv = document.createElement('div');
                    videoListDiv.classList.add('video-list');

                    data.forEach(video => {
                        const videoCard = document.createElement('div');
                        videoCard.classList.add('video-card');

                        const videoElement = document.createElement('video');
                        videoElement.controls = true;

                        const mp4Source = document.createElement('source');
                        mp4Source.src = `/videos/${video.filename.replace(/\.\w+$/, '.mp4')}`;
                        mp4Source.type = 'video/mp4';
                        videoElement.appendChild(mp4Source);

                        const webmSource = document.createElement('source');
                        webmSource.src = `/videos/${video.filename.replace(/\.\w+$/, '.webm')}`;
                        webmSource.type = 'video/webm';
                        videoElement.appendChild(webmSource);

                        const oggSource = document.createElement('source');
                        oggSource.src = `/videos/${video.filename.replace(/\.\w+$/, '.ogg')}`;
                        oggSource.type = 'video/ogg';
                        videoElement.appendChild(oggSource);

                        const titleElement = document.createElement('h3');
                        titleElement.textContent = video.filename;

                        videoCard.appendChild(videoElement);
                        videoCard.appendChild(titleElement);
                        videoListDiv.appendChild(videoCard);
                    });

                    categorySection.appendChild(videoListDiv);
                    videoList.appendChild(categorySection);
                }
            } catch (error) {
                videoList.textContent = `查询出错: ${error.message}`;
            }
        }

        categoryLinks.forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                categoryLinks.forEach(link => link.classList.remove('active'));
                this.classList.add('active');
                const category = this.dataset.category;
                const searchQuery = searchInput.value;
                fetchVideos(category, searchQuery);
            });
        });

        // 页面加载时默认获取全部视频
        window.addEventListener('load', () => {
            fetchVideos('all');
        });

        uploadButton.addEventListener('click', () => {
            uploadModal.style.display = 'flex';
        });

        const clearUploadForm = () => {
            document.getElementById('videoName').value = '';
            document.getElementById('videoCategory').selectedIndex = 0;
            document.getElementById('videoFile').value = '';
        };

        uploadCancel.addEventListener('click', () => {
            uploadModal.style.display = 'none';
            clearUploadForm();
        });

        uploadSubmit.addEventListener('click', async () => {
            const videoName = document.getElementById('videoName').value;
            const videoCategory = document.getElementById('videoCategory').value;
            const videoFile = document.getElementById('videoFile').files[0];

            if (!videoName ||!videoFile) {
                alert('请输入视频名称并选择视频文件');
                return;
            }

            const formData = new FormData();
            formData.append('name', videoName);
            formData.append('category', videoCategory);
            formData.append('file', videoFile);

            try {
                const response = await fetch('http://localhost:3000/upload', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error('上传失败');
                }

                uploadModal.style.display = 'none';
                clearUploadForm();
                fetchVideos('all');
            } catch (error) {
                alert(`上传出错: ${error.message}`);
            }
        });

        searchInput.addEventListener('input', () => {
            const category = Array.from(categoryLinks).find(link => link.classList.contains('active')).dataset.category;
            const searchQuery = searchInput.value;
            fetchVideos(category, searchQuery);
        });
    </script>
</body>

</html>    